<template>
  <a-grid :cols="24" :row-gap="16" class="panel">
    <a-grid-item
      class="panel-col"
      :span="spanType"
      style="border-right: none"
      v-for="item in columns"
    >
      <a-space>
        <a-avatar :size="54" class="col-avatar">
          <img
            alt="avatar"
            :src="item.icon"
          />
        </a-avatar>
        <a-statistic
          :title="item.title"
          :value="item.value"
          :precision="1"
          :value-from="0"
          animation
        >
          <template #suffix>
            %
            <icon-caret-up class="up-icon"  v-if="item.unit ===1"/>
            <icon-caret-down class="down-icon"  v-if="item.unit ===0"/>
          </template>
        </a-statistic>
      </a-space>
    </a-grid-item>
    <a-grid-item :span="24">
      <a-divider class="panel-border" />
    </a-grid-item>
  </a-grid>
</template>

<script lang="ts" setup>

    import {useI18n} from "vue-i18n";

    const { t } = useI18n();
   const spanType= ref({ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 6 });
   interface DataColumn {
     icon: string;
     title: string;
     value: number;
     unit:number
   }
   const columns = computed(() => [
     {
       icon: '//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/288b89194e657603ff40db39e8072640.svg~tplv-49unhts6dw-image.image',
       title: t('workplace.onlineContent'),
       value: 373.5,
       unit: 1,
     },
     {
       icon: '//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/fdc66b07224cdf18843c6076c2587eb5.svg~tplv-49unhts6dw-image.image',
       title: t('workplace.putIn'),
       value: 368,
       unit:1 ,
     },
     {
       icon: '//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/77d74c9a245adeae1ec7fb5d4539738d.svg~tplv-49unhts6dw-image.image',
       title: t('workplace.newDay'),
       value: 8874,
       unit:0,
     },
     {
       icon: '//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/c8b36e26d2b9bb5dbf9b74dd6d7345af.svg~tplv-49unhts6dw-image.image',
       title: t('workplace.newFromYesterday'),
       value: 373.5,
       unit:0,
     }
   ] as DataColumn[]);
</script>

<style lang="less" scoped>
  .arco-grid.panel {
    margin-bottom: 0;
    padding: 16px 20px 0 20px;
  }
  .panel-col {
    padding-left: 43px;
    border-right: 1px solid rgb(var(--gray-2));
  }
  .col-avatar {
    margin-right: 12px;
    background-color: var(--color-fill-2);
  }
  .up-icon {
    color: rgb(var(--red-6));
  }
  .down-icon{
    color: rgb(var(--green-6));
  }
  .unit {
    margin-left: 8px;
    color: rgb(var(--gray-8));
    font-size: 12px;
  }
  :deep(.panel-border) {
    margin: 4px 0 0 0;
  }
</style>
